<template>
  <div>
    <el-tabs v-model="tabIndex" @tab-click="handleClick" style="margin: -10px;">
      <el-tab-pane v-for="(tab, tabS) in tabBars" :key="tabS" :label="tab.name">
        <div class="d-flex align-items-center">
          <el-button type="success" size="mini">发布商品</el-button>
          <el-button type="warning" size="mini" class="ml-2">
            恢复商品
          </el-button>
          <el-button type="danger" size="mini">批量删除</el-button>
          <el-button plain size="mini" class="change">上架</el-button>
          <el-button plain size="mini" class="change">下架</el-button>
          <el-button plain size="mini" class="change">推荐</el-button>
          <div class="ml-auto">
            <el-input
              placeholder="要搜索的商品名称"
              size="mini"
              style="width: 150px;"
            ></el-input>
            <el-button type="info" size="mini" class="ml-2">搜索</el-button>
            <el-button plain size="mini">高级搜索</el-button>
          </div>
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%;"
          class="mt-3"
          border
        >
          <el-table-column
            type="selection"
            width="45"
            align="center"
          ></el-table-column>
          <el-table-column label="序号" width="40"></el-table-column>
          <el-table-column label="日期" width="300">
            <template slot-scope="scope">
              <div class="media">
                <img
                  :src="scope.row.cover"
                  class="mr-3"
                  alt="..."
                  style="width: 60px;"
                />
                <div class="media-body">
                  <h6 class="mt-0" style="font-size: 16px;">
                    {{ scope.row.title }}
                  </h6>
                  <p>分类：{{ scope.row.category }}</p>
                  <p>时间：{{ scope.row.create_time }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="type"
            label="商品类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="sale_count"
            label="实际销量"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="order"
            label="商品排序"
            align="center"
          ></el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <el-button type="success" size="mini"  @click="scope.row.ischeck = 1">
                审核通过
              </el-button>
              <el-button type="danger" size="mini" class="mt-2 ml-0" @click="scope.row.ischeck = 2">
                审核未过
              </el-button>
            </template>
          </el-table-column>
              <el-table-column
            prop="stock"
            label="总库存"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="pprice"
            label="价格(元)"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot="scope">
              <div class="d-flex">
                <el-button type="primary" size="mini" style="width: 60px;">
                  修改
                </el-button>
                <el-button
                  type="danger"
                  size="mini"
                  class="ml-0"
                  @click="deleteItem(scope.$index)"
                  style="width: 60px;"
                >
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabIndex: 0,
      tabBars: [
        {
          name: '审核中',
        },
        {
          name: '出售中',
        },
        {
          name: '已下架',
        },
        {
          name: '库存预警',
        },
        {
          name: '回收站',
        },
      ],
      tableData: [],
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
  },
}
</script>

<style></style>
